<template>
  <div>
    <div v-if=" filelist.length == 0 ">
      <div>目前没有资源文件。。。</div>
    </div>
    <div v-else>
      <el-row :gutter="20">
        <el-col
          :span="8"
          :xs="12"
          :sm="8"
          :md="6"
          :lg="6"
          :xl="4"
          v-for="(item, index) in filelist"
          :key="index"
        >
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <!-- <img :src = imgUrl class="image" />
            <img src = "../assets/file.jpg" class="image" />-->

            <img :src="imgUrl" class="image" v-if="showpic == 'true'" />
            <img src="../assets/file.jpg" class="image" v-else />

            <div style="padding: 14px;">
              <span>{{item.name}}</span>
              <div class="bottom clearfix">
                <time class="time">{{ item.lastModified }}</time>
                <el-link
                  target="_blank"
                  :href="item.sourceUrl"
                  :underline="false"
                  style="margin-left:15px"
                >
                  <el-button type="text" icon="el-icon-download" class="button" @click="downloadFile(item)">下载</el-button>
                </el-link>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";
import axios from "axios";

export default {
  name: "FileList",
  component: {
    // FileCard
  },
  data() {
    return {
      showpic: true,

      filelist: [
        {
          name: 1,
          type: "pic",
          sourceUrl: "../assets/back.jpg"
        },
        {
          name: 2,
          type: "pic",
          sourceUrl: "../assets/js.jpg"
        },
        {
          name: 3,
          type: "pic",
          sourceUrl: "../assets/pic_html5.gif"
        },
        {
          name: 1
        },
        {
          name: 2
        },
        {
          name: 3
        },
        {
          name: 1
        },
        {
          name: 2
        },
        {
          name: 3
        },
        {
          name: 1
        },
        {
          name: 2
        },
        {
          name: 3
        },
        {
          name: 1
        },
        {
          name: 2
        },
        {
          name: 3
        }
      ]
    };
  },
  methods: {
    downloadFile(item) {
      // handlePreview(file) {
      var a = document.createElement("a");
      var event = new MouseEvent("click");
      a.download = item.name;
      a.href = item.sourceUrl;
      a.dispatchEvent(event);
      // }
    }
  },
  computed: {
    imgUrl: function(item) {
      if (item.type == "pic") {
        return filelist.sourceUrl;
      } else {
        showpic = false;
        return "../assets/file.jpg";
      }
    }
  },
  mounted() {
    axios
      .get("/filelist", {
        params: {
          // ID: 12345
        }
      })
      .then(function(response) {
        console.log(response);
        this.filelist = response.data;
      })
      .catch(function(error) {
        console.log(error);
      });
  }
};
</script>

<style  scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>